<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            padding: 20px;
        }

        #app {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 0;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #100202;
            text-align: center;
        }

        table {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            border-collapse: collapse;
        }

        th, td {
            padding: 10px;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #a7a5a4;
            color: white;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        button {
            background-color: #f7b0de;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }

        button:hover {
            background-color: #fdb6d0;
        }

        span {
            display: block;
            text-align: center;
            margin-top: 20px;
            font-size: 1.2em;
            color: #888;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            padding: 5px 0;
        }

        .product-list {
            margin-bottom: 20px;
        }

        .product-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .product-item:last-child {
            border-bottom: none;
        }

        .add-to-cart {
            background-color: #f878a5;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }

        .add-to-cart:hover {
            background-color: hsl(104, 81%, 78%);
        }

        .welcome-page {
            text-align: center;
            margin-top: 100px;
        }

        .welcome-page h1 {
            font-size: 2em;
            margin-bottom: 20px;
        }

        .welcome-page p {
            font-size: 1.2em;
            margin-bottom: 20px;
        }

        .welcome-page button {
            background-color: #fc557c;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            margin: 0 10px;
        }

        .welcome-page button:hover {
            background-color: #d9dada;
        }

        .total {
            text-align: right;
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-if="showWelcome" class="welcome-page">
            <h1>欢迎来购物</h1>
            <p>请选择你要继续的操作</p>
            <button @click="exitApp">退出</button>
            <button @click="goToShoppingList">购物</button>
        </div>
        <div v-else-if="showCart">
            <h1>购物车</h1>
            <button @click="goToAddProduct" style="margin-bottom: 20px;">添加商品</button>
            <table border="1px" v-if="cart.length > 0">
                <tr>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in cart" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="decreaseQuantity(item)">-</button>
                        {{item.quantity}}
                        <button @click="increaseQuantity(item)">+</button>
                    </td>
                    <td>{{item.price * item.quantity }}</td>
                    <td><button @click="removeFromCart(item)">删除</button></td>
                </tr>
                <tr>
                    <!-- 总计 -->
                    <td colspan="5" class="total">共 {{totalItems}} 件商品<br>总计：{{totalAmount}}元</td>
                    <td></td>
                </tr>
            </table>
            <span v-if="cart.length == 0">
                购物车为空，请添加商品！
            </span>
        </div>
        <div v-else>
            <h1>商品列表</h1>
            <div class="product-list">
                <div class="product-item" v-for="product in products" :key="product.id">
                    <span>{{ product.name }}￥{{ product.price }}</span>
                    <button class="add-to-cart" @click="addToCart(product)">加入购物车</button>
                </div>
            </div>
            <button @click="goToCart" style="display: block; margin: 20px auto;">添加完成</button>
        </div>
    </div>
</body>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '购物车',
            showWelcome: true,
            showCart: false,
            products: [
                { id: '1', name: '海绵宝宝', price: 30 },
                { id: '2', name: '派大星', price: 24 },
                { id: '3', name: '喜洋洋', price: 44 },
                { id: '4', name: '懒洋洋', price: 12 },
                { id: '5', name: '光头强', price: 50 },
                { id: '6', name: '吉吉', price: 8 },
                { id: '7', name: '蜡笔小新', price: 47 },
                { id: '8', name: '黑魔仙', price: 25 },
            ],
            cart: []
        },
        computed: {
            // 计算购物车中商品的总金额
            //0：初始值，不能少
            totalAmount() {
                return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
            },
            // 添加一个新计算属性来获取购物车中商品的总数量
            totalItems() {
                return this.cart.reduce((total, item) => total + item.quantity, 0);
            }
        },
        methods: {
            //购物车数量加
            addToCart(product) {g
                const existingItem = this.cart.find(item => item.id === product.id);
                if (existingItem) {
                    existingItem.quantity++;
                } else {
                    this.cart.push({ ...product, quantity: 1 });
                }
            },
            removeFromCart(item) {
                this.cart = this.cart.filter(cartItem => cartItem.id !== item.id);
            },
            increaseQuantity(item) {
                item.quantity++;
            },
            //购物车数量减
            decreaseQuantity(item) {
                if (item.quantity > 1) {
                    item.quantity--;
                } else {
                    this.removeFromCart(item);
                }
            },
            exitApp() {
                window.close();
            },
            goToShoppingList() {
                this.showWelcome = false;
                this.showCart = false;
            },
            goToAddProduct() {
                this.showCart = false;
            },
            goToCart() {
                this.showCart = true;
            }
        }
    });
</script>